<template>
	<view>
		<view class="preview">
			<image src="../../../static/phonecall.png" mode="" class="phonecall" @click="phonecall()"></image>
			<view class="item">
				<view class="head">
					<image src="../../../static/store-mini.png" mode="" class="image"></image>
					<view class="title">
						预约门店
					</view>
				</view>
				<view class="text bold">
					{{store.name}}
				</view>
				<view class="text">
					{{store.address}}
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/label.png" mode="" class="image"></image>
					<view class="title">
						预约服务
					</view>
				</view>
				<view class="text bold">
					{{service.name}}
				</view>
				<view class="text server-time">
					{{service.time}}min
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/person.png" mode="" class="image"></image>
					<view class="title">
						预约店员
					</view>
				</view>
				<view class="text">
					{{staff.nickname}}
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/clock.png" mode="" class="image"></image>
					<view class="title">
						预约时间
					</view>
				</view>
				<view class="text">
					{{date}} {{time}}
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/phone-mini.png" mode="" class="image"></image>
					<view class="title">
						联系电话
					</view>
				</view>
				<view class="text">
					{{user.phone}}
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/wallet.png" mode="" class="image"></image>
					<view class="title">
						付款方式
					</view>
				</view>
				<view class="text">
					{{pay_type==0?'划卡支付':'到店支付'}}
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image src="../../../static/edit.png" mode="" class="image"></image>
					<view class="title">
						留言备注
					</view>
				</view>
				<view class="text">
					<input type="text" v-model="note" placeholder="可输入留言备注"/>
				</view>
			</view>
			<view class="total">
				<view class="total-item">
					<view class="total-title">
						商品总额
					</view>
					<view class="total-value">
						￥{{bill.price}}
					</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						优惠金额
					</view>
					<view class="total-value">
						￥{{bill.discount}}
					</view>
				</view>
				<view class="total-item total-item-total">
					<view class="total-title">
						总计
					</view>
					<view class="total-value">
						￥{{bill.total}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150upx;"></view>
		<view class="bottom">
			<view class="bottom-total">
				已优惠:￥{{bill.discount}}
			</view>
			合计:
			<view class="total-price">
				￥{{bill.total}}
			</view>
			<view style="flex: 1;"></view>
			<view class="submit-btn" @click="confirm">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id:0,
				staff_id:0,
				service_id:0,
				date:"12.01",
				time:"21:30",
				store:{},
				service:{},
				staff:{},
				user:{},
				bill:{},
				note:"",
				pay_type:0,
				card_item_id:0,
			};
		},
		onLoad:function(e){
			this.store_id=e.store_id;
			this.staff_id=e.staff_id;
			this.service_id=e.service_id;
			this.date=e.date;
			this.time=e.time;
			this.pay_type=e.pay_type;
			this.card_item_id=e.card_item_id;
			
		},
		onShow:function(){
			this.getPreviewInfo();
		},
		methods:{
			phonecall:function(){
				if(this.store.phone){
					uni.makePhoneCall({
						phoneNumber:this.store.phone
					})
				}else{
					uni.showToast({
						title:"门店未设置电话",
						image:"../../../static/error.png"
					})
				}
				
			},
			confirm:function(){
				var that=this;
				uni.showLoading({
					title:"提交中"
				})
				that.ajax("/order/service/",{
					token:uni.getStorageSync("token"),
					store_id:this.store_id,
					staff_id:this.staff_id,
					service_id:this.service_id,
					note:this.note,
					date:this.date,
					time:this.time,
					pay_type:this.pay_type,
					card_item_id:this.card_item_id,
				},function(res){
					uni.showModal({
						title:"预约成功",
						content:"请于"+that.date+" "+that.time+"至"+that.store.name,
						showCancel:false,
						success:function(e){
							if(e.confirm){
								uni.navigateBack({
									delta:10
								});
								uni.na
							}
						}
					})
				});
			},
			getPreviewInfo:function(){
				var that=this;
				uni.showLoading({
					title:"加载中"
				})
				that.ajax("/order/service_preview/",{
					token:uni.getStorageSync("token"),
					store_id:this.store_id,
					staff_id:this.staff_id,
					service_id:this.service_id,
					pay_type:this.pay_type,
				},function(res){
					that.staff=res.data.data.staff;
					that.store=res.data.data.store;
					that.service=res.data.data.service;
					that.user=res.data.data.user;
					that.bill=res.data.data.bill;
				});
			}
		}
	}
</script>

<style>
	
	.total{
		margin-top: 60upx;
		background: #ffffff;
		padding: 0 20upx;
	}
	.total-item{
		display: flex;
		flex-direction: row;
		align-content: space-between;
		align-items: center;
		padding: 20upx 0;
	}
	.total-title{
		flex: 1;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.total-value{
		flex: 1;
		font-weight: 600;
		text-align: right;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.bottom{
		width: 100%;
		background: #ffffff;
		box-shadow:0upx 2upx 20upx 0upx rgba(71,142,126,0.15);
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;
		font-size: 24upx;
		color: #4B4B4B;
		background: #ffffff;
		z-index: 1000;
	}
	.submit-btn{
		background: #45AA8C;
		width: 234upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		border-radius: 38upx;
		color: #ffffff;
		font-size: 32upx;
		margin-right: 24upx;
	}
	.bottom-total{
		margin-right: 64upx;
		margin-left: 24upx;
	}
	.total-price{
		color: #FF7465;
		font-size: 36upx;
	}
.image{
	width: 32upx;
	height: 32upx;
	margin-right: 12upx;
}
.phonecall{
	position: absolute;
	top:56upx;
	right: 56upx;
	width: 46upx;
	height: 46upx;
}
.preview{
	margin:32upx 0;
	padding: 28upx;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	background: #ffffff;
	position: relative;
}
.item{
	border-radius: 15upx;
	box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	margin-bottom: 30upx;
	padding:28upx
}
.head{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10upx 0;
}
.title{
	color: #8B8B8B;
	font-size: 28upx;
}
.server-time{
	font-size: 24upx;
	line-height: 30upx;
	background: #45AA8C;
	border-radius: 8upx;
	display: inline-block;
	padding: 0 10upx;
	color: #ffffff!important;
}
.text{
	font-size: 24upx;
	color:#4B4B4B;
	margin-left: 35upx;
}
.bold{
	color: #4B4B4B;
	font-weight: 600;
	font-size: 28upx;
	padding: 15upx 0;
}
</style>
